<template>
  <div class="manage-container">
    <component :is="layoutComponent" />
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount } from 'vue'
import { LayoutEnum } from '@/stores/types'
import { settingsStore } from '@/stores'
import MenuMain from '@/layout/MenuMain.vue'
import HeaderMain from '@/layout/HeaderMain.vue'


const layoutComponent = computed(() => {
  switch (settingsStore.layoutType) {
    case LayoutEnum.MENU:
      return MenuMain
    case LayoutEnum.HEADER:
      return HeaderMain
    default:
      return MenuMain
  }
})

onBeforeMount(() => {
  console.log(settingsStore.$state.layoutType)
})
</script>

<style scoped>
#app {
  height: 100%;
}
</style>